<template>
  <el-dialog
    v-dialogDrag
    :visible.sync="dialogVisible"
    width="800px"
    center
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
  >
    <template #title>
      <div
        class="u-relative u-flex u-row-center u-user-select-none custom-header"
        style="background-color: #e2e8ef"
      >
        <span class="custom-header--title">{{ title }}</span>
        <div class="u-absolute-r custom-header--action">
          <i
            class="el-dialog__close u-cursor-pointer el-icon el-icon-close"
            v-throttle="() => $emit('cancel')"
          ></i>
        </div>
      </div>
    </template>

    <div>
      <div class="is-back-padding is-textAlign">
        <el-form :model="formData" size="mini" label-width="150px">
          <el-row :gutter="0">
            <el-col :span="12">
              <el-form-item label="其他收入类别" required>
                <el-input
                  v-model="formData.feia1"
                  placeholder="其他收入类别"
                  clearable
                  :style="{ width: '100%' }"
                >
                </el-input>
              </el-form-item>
              <el-form-item label="支付方式" class="card-body__eformItem">
                <el-select
                  v-model="formData.feia2"
                  placeholder="请选择支付方式"
                  filterable
                  clearable
                  :style="{ width: '100%' }"
                >
                  <el-option
                    v-for="item in listOptions.zhifufanshiOptiopns"
                    :key="item.ID"
                    :label="item.Name"
                    :value="item.ID"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="分摊类型" class="card-body__eformItem">
                <el-select
                  v-model="formData.fengtangleixin"
                  placeholder="请选择分摊类型"
                  filterable
                  clearable
                  :style="{ width: '100%' }"
                >
                  <el-option
                    v-for="item in listOptions.fentanleixingOptiopns"
                    :key="item.ID"
                    :label="item.Name"
                    :value="item.ID"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="税率">
                <el-select
                  v-model="formData.feia3"
                  placeholder="请选择税率"
                  filterable
                  clearable
                  :style="{ width: '100%' }"
                >
                  <el-option
                    v-for="item in listOptions.shulvOptiopns"
                    :key="item.ID"
                    :label="item.Name"
                    :value="item.ID"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="单位">
                <el-input
                  v-model="formData.feia4"
                  placeholder="单位"
                  clearable
                  :style="{ width: '100%' }"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="标准单价">
                <el-input
                  v-model="formData.feia5"
                  placeholder="标准单价"
                  clearable
                  :style="{ width: '100%' }"
                >
                </el-input>
              </el-form-item>
              <el-form-item label="排序">
                <el-input
                  v-model="formData.feia6"
                  placeholder="排序"
                  clearable
                  :style="{ width: '100%' }"
                >
                </el-input>
              </el-form-item>
              <el-form-item label="系统是否显示">
                <el-select
                  v-model="formData.feia7"
                  placeholder="请选择系统是否显示"
                  filterable
                  clearable
                  :style="{ width: '100%' }"
                >
                  <el-option
                    v-for="item in listOptions.shifouOptiopns"
                    :key="item.ID"
                    :label="item.Name"
                    :value="item.ID"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="是否常用">
                <el-select
                  v-model="formData.feia8"
                  placeholder="请选择是否常用"
                  filterable
                  clearable
                  :style="{ width: '100%' }"
                >
                  <el-option
                    v-for="item in listOptions.shifouOptiopns"
                    :key="item.ID"
                    :label="item.Name"
                    :value="item.ID"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="计价说明备注">
                <el-input
                  v-model="formData.feia9"
                  placeholder="计价说明备注"
                  clearable
                  :style="{ width: '100%' }"
                >
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="is-textAlign">
        <!-- 详情模式下 -->
        <div class="is-justifyContent-Evenly">
          <el-button
            type="primary"
            size="mini"
            style="position: relative; top: 10px; width: 120px"
            @click="subim"
          >
            确定
          </el-button>
          <el-button
            type="primary"
            size="mini"
            style="position: relative; top: 10px; width: 120px"
            v-throttle="() => $emit('cancel')"
          >
            返回
          </el-button>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import ValidateMixin from "@/mixins/ValidateMixin.js";
// 表单校验
const REQUIRED_PORP_LIST = [
  {
    prop: "feia1",
    label: "其他收入类别",
  },
];

export default {
  name: "YiBanForm",
  mixins: [ValidateMixin],
  components: {},
  props: {
    mode: {
      type: String,
    },
  },

  data() {
    return {
      title: "",
      dialogVisible: true,
      formData: {
        feia1: "",
        feia2: "",
        feia3: "",
        feia4: "",
        feia5: "",
        feia6: "",
        feia7: "",
        feia8: "",
        feia9: "",
        fengtangleixin: "",
      },
      listOptions: {
        zhifufanshiOptiopns: [
          {
            ID: "现金",
            Name: "现金",
          },
          {
            ID: "记账",
            Name: "记账",
          },
          {
            ID: "分摊",
            Name: "分摊",
          },
          {
            ID: "绩效",
            Name: "绩效",
          },
          {
            ID: "其他",
            Name: "其他",
          },
        ],
        fentanleixingOptiopns: [
          {
            ID: "无",
            Name: "无",
          },
          {
            ID: "车/次",
            Name: "车/次",
          },
          {
            ID: "总里程",
            Name: "总里程",
          },
          {
            ID: "标准里程",
            Name: "标准里程",
          },
          {
            ID: "重车里程",
            Name: "重车里程",
          },
          {
            ID: "空车里程",
            Name: "空车里程",
          },
        ],
        shulvOptiopns: [
          {
            ID: "0",
            Name: "0",
          },
          {
            ID: "3%",
            Name: "3%",
          },
          {
            ID: "6%",
            Name: "6%",
          },
          {
            ID: "9%",
            Name: "9%",
          },
          {
            ID: "10%",
            Name: "10%",
          },
          {
            ID: "13%",
            Name: "13%",
          },
          {
            ID: "16%",
            Name: "16%",
          },
        ],
        shifouOptiopns: [
          {
            ID: "是",
            Name: "是",
          },
          {
            ID: "否",
            Name: "否",
          },
        ],
      },
    };
  },
  methods: {
    //校验必填
    subim() {
      if (!this.$validateForm(this.formData, REQUIRED_PORP_LIST)) return;
      this.$notify.success({
        title: "消息",
        message: "保存成功",
        position: "bottom-right",
      });
      this.$emit("done");
    },
  },

  created() {
    if (this.mode === "addqitashouru_from") this.title = "新增其他收入类别";
    if (this.mode === "editqitashouru_from") this.title = "编辑其他收入类别";
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
  background-color: rgb(226, 232, 239);
}
// 弹窗表头
::v-deep .custom-header {
  background-color: rgb(226, 232, 239);
  & .custom-header--action {
    font-size: 20px;
  }
}
.is-back-padding {
  background-color: rgb(226, 232, 239);
  padding: 20px 30px 0 0px;
}
.is-justifyContent-Evenly {
  display: flex;
  justify-content: space-evenly;
}
.is-buttonBackground {
  position: relative;
  width: 80px;
  background: rgb(204, 204, 204);
  color: #000;
  border-color: #000;
}

// 隐藏
::v-deep.disNone {
  display: none;
}
.fron_i {
  font-size: 16px;
  cursor: pointer;
  color: #96872a;
}
</style>
